<template>
  <div :style="{background: `url(${bg})`}" class="box">
    <div class="box-left">
      <div class="box-left-wrap">
        <section>
          <div>较上日+{{store.chainAdd.localConfirmH5}}</div>
          <div>{{store.chainTotal.localConfirm}}</div>
          <div>本土现有确诊</div>
        </section>
        <section>
          <div>较上日+{{store.chainAdd.nowConfirm}}</div>
          <div>{{store.chainTotal.nowConfirm}}</div>
          <div>现有确诊</div>
        </section>
        <section>
          <div>较上日+{{store.chainAdd.confirm}}</div>
          <div>{{store.chainTotal.confirm}}</div>
          <div>累计确诊</div>
        </section>
        <section>
          <div>较上日+{{store.chainAdd.noInfect}}</div>
          <div>{{store.chainTotal.noInfect}}</div>
          <div>无症状感染者</div>
        </section>
        <section>
          <div>较上日+{{store.chainAdd.importedCase}}</div>
          <div>{{store.chainTotal.importedCase}}</div>
          <div>境外输入</div>
        </section>
        <section>
          <div>较上日+{{store.chainAdd.dead}}</div>
          <div>{{store.chainTotal.dead}}</div>
          <div>累计死亡</div>
        </section>
      </div>
      <div class="box-left-pie">
      </div>
      <div class="box-left-line"></div>
    </div>
    <div class="box-center" id="china">
    </div>
    <div class="box-right">
      <table class="table" cellspacing="0" border="1">
        <thead>
          <tr>
            <th>地区</th>
            <th>新增确诊</th>
            <th>累计确诊</th>
            <th>治愈</th>
            <th>死亡</th>
          </tr>
        </thead>
        <transition-group tag="tbody" move-class="mmm" enter-active-class="animate_animated animate__flipInY">
          <tr :key="item.name" v-for="item in store.item">
            <td align="center">{{item.name}}</td>
            <td align="center">{{item.today.confirm}}</td>
            <td align="center">{{item.total.confirm}}</td>
            <td align="center">{{item.total.heal}}</td>
            <td align="center">{{item.total.dead}}</td>
          </tr>
        </transition-group>
      </table>
    </div>
  </div>
</template>

<script lang='ts' setup>
// import { reactive, toRefs} from 'vue';
import bg from './assets/2.webp'
import { useStore } from './stores'
import { onMounted } from 'vue'
import * as echarts from 'echarts'//echarts5
import './assets/chain'
import { geoCoordMap } from './assets/geomap'
import 'animate.css'
// import axios from 'axios'

const store = useStore()

onMounted(async () => {
  await store.getList()

  initChart()
  initPie()
  initLine()
})
//https://www.isqqw.com/echartsdetail?id=15158
const initChart = () => {
  const charts = echarts.init(document.querySelector('#china')!)
  // let data = [
  //   {
  //     name: "内蒙古",
  //     itemStyle: {
  //       areaColor: "#56b1da",
  //     },
  //     value: [110.3467, 41.4899]
  //   },
  // ];
  const city = store.list.diseaseh5Shelf.areaTree[0].children
  // console.log(city);
  store.item = city[4].children as any
  const data = city.map(v => {
    return {
      name: v.name,
      value: geoCoordMap[v.name].concat(v.total.nowConfirm),
      children: v.children
    }
  })
  charts.setOption({
    // backgroundColor: "black",
    geo: {
      map: "china",
      aspectScale: 0.8,
      layoutCenter: ["50%", "50%"],
      layoutSize: "120%",
      itemStyle: {
        // normal: {
        areaColor: {
          type: "linear-gradient",
          x: 0,
          y: 1200,
          x2: 1000,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#152E6E", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#0673AD", // 50% 处的颜色
            },
          ],
          global: true, // 缺省为 false
        },
        shadowColor: "#0f5d9d",
        shadowOffsetX: 0,
        shadowOffsetY: 15,
        opacity: 0.5,
        // },

      },
      emphasis: {
        areaColor: "#0f5d9d",
      },
      regions: [
        {
          name: "南海诸岛",
          itemStyle: {
            areaColor: "rgba(0, 10, 52, 1)",
            borderColor: "rgba(0, 10, 52, 1)",
            // normal: {
            opacity: 0,
            label: {
              show: false,
              color: "#009cc9",
            },
            // },
          },
          label: {
            show: true,
            color: "#FFFFFF",
            fontSize: 12,
          },
        },
      ],
    },
    series: [
      {
        type: "map",
        // selectedMode: "multiple",
        map: "china",
        aspectScale: 0.8,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "120%",
        zoom: 1, //当前视角的缩放比例
        // roam: true, //是否开启平游或缩放
        scaleLimit: {
          //滚轮缩放的极限控制
          min: 1,
          max: 2,
        },
        label: {
          show: false,
          color: "#FFFFFF",
          fontSize: 16,
        },
        itemStyle: {
          // normal: {
          areaColor: "#0c3653",
          borderColor: "#1cccff",
          borderWidth: 1.8,
          // },

        },
        emphasis: {
          areaColor: "#56b1da",
          label: {
            show: true,
            color: "#fff",
          },
        },
        data: data,
      },
      {
        // name: 'Top 5',
        type: 'scatter',
        coordinateSystem: 'geo',
        //   symbol: 'image://http://ssq168.shupf.cn/data/biaoji.png',
        // symbolSize: [30,120],
        // symbolOffset:[0, '-40%'] ,
        symbol: 'pin',
        symbolSize: [45, 45],
        label: {
          // normal: {
          show: true,
          color: 'white',
          formatter: (val: any) => {
            // console.log(val.data.value[2]);
            return val.data.value[2]
          }
          // }
        },
        itemStyle: {
          // normal: {
          color: '#34a1dd', //标志颜色
          // }51,166,227
        },
        data: data,
        // showEffectOn: 'render',
        // rippleEffect: {
        //     brushType: 'stroke'
        // },
        // hoverAnimation: true,
        // zlevel: 1
      },
    ],
  })
  charts.on('click', (e: any) => {
    // console.log(e.data);
    store.item = e.data.children
  })
}
const initPie = () => {
  const charts = echarts.init(document.querySelector('.box-left-pie')!)
  const option = {
    backgroundColor: '#223651',
    tooltip: {
      trigger: 'item'
    },
    // legend: {
    //   top: '5%',
    //   left: 'center'
    // },
    series: [
      {
        name: '城市详情',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '15',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: store.cityDetail.map(v => {
          return {
            name: v.city,
            value: v.nowConfirm
          }
        })
      }
    ]
  };
  charts.setOption(option)
}
const initLine = () => {
  const charts = echarts.init(document.querySelector('.box-left-line')!)
  const option = {
    backgroundColor: '#223651',
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: store.cityDetail.map(v => v.city),
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    label: {
      show: true
    },
    series: [
      {
        data: store.cityDetail.map(v => v.confirm),
        type: 'line',
        smooth: true
      }
    ]
  };
  charts.setOption(option)
}
/* const initChart = () => {
  const city = store.list.diseaseh5Shelf.areaTree[0].children
  console.log(city);

  const charts = echarts.init(document.querySelector('#china')!)
  // let ROOT_PATH = 'https://echarts.apache.org/examples';
  let option;
  charts.showLoading();
  axios.get('https://geo.datav.aliyun.com/areas_v3/bound/810000_full.json').then((geoJson: any) => {
    charts.hideLoading();
    echarts.registerMap('HK', geoJson.data);
    charts.setOption(
      (option = {
        title: {
          text: 'Population Density of Hong Kong （2011）',
          subtext: 'Data from Wikipedia',
          sublink:
            'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '香港18区人口密度',
            type: 'map',
            map: 'HK',
            label: {
              show: true
            },
            data: [
              { name: '中西区', value: 20057.34 },
              { name: '湾仔', value: 15477.48 },
              { name: '东区', value: 31686.1 },
              { name: '南区', value: 6992.6 },
              { name: '油尖旺', value: 44045.49 },
              { name: '深水埗', value: 40689.64 },
              { name: '九龙城', value: 37659.78 },
              { name: '黄大仙', value: 45180.97 },
              { name: '观塘', value: 55204.26 },
              { name: '葵青', value: 21900.9 },
              { name: '荃湾', value: 4918.26 },
              { name: '屯门', value: 5881.84 },
              { name: '元朗', value: 4178.01 },
              { name: '北区', value: 2227.92 },
              { name: '大埔', value: 2180.98 },
              { name: '沙田', value: 9172.94 },
              { name: '西贡', value: 3368 },
              { name: '离岛', value: 806.98 }
            ],
            // 自定义名称映射
            nameMap: {
              'Central and Western': '中西区',
              Eastern: '东区',
              Islands: '离岛',
              'Kowloon City': '九龙城',
              'Kwai Tsing': '葵青',
              'Kwun Tong': '观塘',
              North: '北区',
              'Sai Kung': '西贡',
              'Sha Tin': '沙田',
              'Sham Shui Po': '深水埗',
              Southern: '南区',
              'Tai Po': '大埔',
              'Tsuen Wan': '荃湾',
              'Tuen Mun': '屯门',
              'Wan Chai': '湾仔',
              'Wong Tai Sin': '黄大仙',
              'Yau Tsim Mong': '油尖旺',
              'Yuen Long': '元朗'
            }
          }
        ]
      })
    );
  })
  option && charts.setOption(option);
} */
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}

@itemColor: #41b0db;
@itemBg: #223651;
@itemBorder: #212028;

html,
body,
#app {
  height: 100%;
  overflow: hidden;
  font-size: 14px;
}

.box {
  height: 100%;
  display: flex;
  background-size: cover !important;

  &-left {
    width: 350px;
    overflow-y: auto;
    overflow-x: hidden;

    &-pie {
      height: 300px;
      margin-top: 20px;

      canvas {
        height: auto !important;
        width: 100% !important;
      }
    }

    &-line {
      height: 300px;
      margin-top: 20px;
    }

    &-wrap {
      color: white;
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: 1fr 1fr;

      section {
        background-color: @itemBg;
        border: 1px solid @itemBorder;
        padding: 10px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;

        div:nth-child(2) {
          color: @itemColor;
          padding: 10px 0;
          font-weight: 800;
          font-size: 20px;
        }
      }
    }
  }

  &-center {
    flex: 1;

    // background-color: rgb(105,162,215);
    canvas {
      width: 100% !important;
      height: auto !important;
    }
  }

  &-right {
    width: 400px;
    overflow: auto;
    color: white;
    font-size: 14px;

    .table {
      width: 100%;
      background-color: #212028;

      tr {
        th {
          padding: 10px;
          white-space: nowrap;
        }

        td {
          padding: 5px 10px;
          width: 100%;
          white-space: nowrap;
        }
      }

      .mmm {
        transition: all .5s;
      }
    }
  }
}
</style> 